<template>
  <template v-for="menu in menus">
    <template v-if="menu.children && menu.children.length > 0">
      <el-sub-menu :index="menu.path" :key="menu.path" :expand-close-icon="CaretRight" :expand-open-icon="CaretBottom">
        <template #title>
          <i :color="config.getColorVal('menuColor')" :class="[
            'icon',
            menu.meta?.icon ? menu.meta?.icon : config.layout.menuDefaultIcon,
          ]" />
          <span>{{ menu.meta?.title ? menu.meta?.title : "noTitle" }}</span>
        </template>
        <menu-tree :menus="menu.children"></menu-tree>
      </el-sub-menu>
    </template>
    <template v-else>
      <el-menu-item :index="menu.path" :key="menu.path" @click="onClickedMenu(menu)">
        <i :color="config.getColorVal('menuColor')" :class="[
          'icon',
          menu.meta?.icon ? menu.meta?.icon : config.layout.menuDefaultIcon,
        ]" />
        <span>{{ menu.meta?.title ? menu.meta?.title : "noTitle" }}
          <div class="collect-icon" @click.stop="handleCollect(menu)">
            <!--          <svg v-if="!menu.collect" width="16px" height="16px" viewBox="0 0 16 16" version="1.1"-->
            <!--               xmlns="http://www.w3.org/2000/svg"-->
            <!--               xmlns:xlink="http://www.w3.org/1999/xlink">-->
            <!--             <path fill="currentColor"-->
            <!--                   d="M8.00145388,3.25955498 L6.46132421,6.380198 L3.01749098,6.88061619 L5.50947237,9.30969715 L4.92119551,12.7396154 L8.00145388,11.1202278 L11.0817118,12.7396154 L10.493434,9.30969715 L12.9854155,6.88061619 L9.54158306,6.380198 L8.00145388,3.25955498 Z M14.6990929,6.60667419 L11.567915,9.65881729 L12.307086,13.9685116 C12.3491192,14.2135839 12.0918903,14.4004726 11.8718014,14.2847652 L8.00145388,12.2500038 L4.13110662,14.2847652 C3.91101837,14.4004726 3.65378809,14.2135849 3.69582105,13.9685125 L4.43499184,9.65881729 L1.30381508,6.60667467 C1.12575997,6.43311405 1.22401249,6.13072157 1.47007862,6.09496641 L5.79725885,5.46619034 L7.73243332,1.54509847 C7.8424778,1.32212479 8.16043043,1.32212566 8.27047491,1.54509936 L10.2056484,5.46619034 L14.5328283,6.09496593 C14.7788944,6.13072157 14.8771477,6.43311357 14.6990929,6.60667419 Z"-->
            <!--                   id="star"></path>-->
            <!--          </svg>-->
            <!--            <svg v-else width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
            <!--                 xmlns:xlink="http://www.w3.org/1999/xlink">-->
            <!--               <path fill="currentColor" d="M14.6990929,6.60667419 L11.567915,9.65881729 L12.307086,13.9685116 C12.3491192,14.2135839 12.0918903,14.4004726 11.8718014,14.2847652 L8.00145388,12.2500038 L4.13110662,14.2847652 C3.91101837,14.4004726 3.65378809,14.2135849 3.69582105,13.9685125 L4.43499184,9.65881729 L1.30381508,6.60667467 C1.12575997,6.43311405 1.22401249,6.13072157 1.47007862,6.09496641 L5.79725885,5.46619034 L7.73243332,1.54509847 C7.8424778,1.32212479 8.16043043,1.32212566 8.27047491,1.54509936 L10.2056484,5.46619034 L14.5328283,6.09496593 C14.7788944,6.13072157 14.8771477,6.43311357 14.6990929,6.60667419 Z" id="star"></path>-->
            <!--            </svg>-->
          </div>
        </span>
      </el-menu-item>
    </template>
  </template>
</template>
<script setup>
import { CaretRight, CaretBottom } from "@element-plus/icons-vue";
import { useConfig } from "@/stores/config";
import { onClickMenu } from "@/utils/router";
import { ref, defineProps } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const props = defineProps({ menus: () => [] });
const config = ref(useConfig());
const handleCollect = (menu) => {
  menu.collect = !menu.collect
}
const onClickedMenu = (menu) => {
  onClickMenu(menu, router);
};
</script>

<style scoped>
.el-sub-menu .icon,
.el-menu-item .icon {
  font-size: 18px;
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.is-active>.icon {
  color: var(--el-menu-active-color) !important;
}

.el-menu-item.is-active {
  background-color: v-bind('config.getColorVal("menuActiveBackground")');
}
</style>
